<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <base href="<%=basePath%>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <title>Document</title>
    <%@include file="../../common.jsp"%>
    <c:set var="path" value="${pageContext.request.contextPath}"/>
</head>
<body>
    <h2>线路管理</h2>
    <hr>
    <form class="layui-form" action="">
        <div class="layui-form-item">

            <div class="layui-inline">
                <label class="layui-form-label">线路编号:</label>
                <div class="layui-input-inline" style="width: 200px;">
                    <input id="lineCode" type="text" name="price_min" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">线路状态:</label>
                <div class="layui-input-inline">
                    <select name="modules" lay-verify="required" lay-search="" id="state">
                        <option value="-1">请选择</option>
                        <option value="1">正常</option>
                        <option value="2">检修中</option>
                    </select>
                </div>

                <div class="layui-input-inline" style="width: 100px;">
                    <button type="button" class="layui-btn layui-btn-normal" onclick="searchData();"><i class="layui-icon layui-icon-search"></i> 查询</button>
                </div>
            </div>

        </div>
    </form>
    <table class="layui-table" id="lineTable" lay-filter="lineTable"></table>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-circle"></i>添加</button>
            <button class="layui-btn layui-btn-sm" lay-event="export"><i class="layui-icon layui-icon-export"></i> 导出数据</button>
        </div>
    </script>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit" href="javascript:void(0)">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" href="javascript:void(0)">删除</a>
    </script>

    <script>

        //显示杆塔
        $.get("${path}/psPole/getPole",function (data) {
            $.each(data,function () {
                var option = $('<option></option>').appendTo("#pole");
                option.text(this.poleCode).val(this.id);
            });
        });
        //全局定义一次, 加载formSelects
        layui.config({
            base: '${path}/layui/lay/modules/' //此处路径请自行处理, 可以使用绝对路径
        }).extend({
            formSelects: 'formSelects-v4.min'
        });

        function searchData(){
            layui.table.reload("lineTable",{
                page:{
                    curr : 1
                },
                where:{
                    "lineCode":$("#lineCode").val(),
                    "runningStatusId":$("#state").val()
                }
            });
        }

        layui.use(["table","form","laydate","formSelects"],function () {
            var laydate = layui.laydate;
            //渲染日期
            laydate.render({
                elem: '#riqi'
                ,format: 'yyyy年MM月dd日'
            });
            var table = layui.table;
            //获取数据渲染
            $.get("/line/selectLine",function (data) {
                table.render({
                    id:'lineTable',
                    elem:'#lineTable',
                    url:'line/selectLine',
                    page:true,
                    even:false,
                    toolbar:'#toolbarDemo',
                    cols:[[
                        {type:'checkbox'},
                        {field:'lineCode', title:'线路编号'},
                        {field:'lineName', title:'线路名称'},
                        {field:'startPoleCode', title:'起始杆号'},
                        {field:'endPoleCode', title:'终止杆号'},
                        {field:'towerBaseNum', title:'塔基数'},
                        {field:'runningStatusName', title:'运行状态'},
                        {field:'isStart',title:'启用状态',templet:function (d) {
                                var str = d.isStart == 1 ? "checked" : "";
                                var check = '<input type="checkbox" title="启用" '+str+'>';
                                return check;
                            }},
                        {toolbar:'#barDemo',title:'操作'}
                    ]]
                })
            })
            //监听头部工具栏
            table.on('toolbar(lineTable)',function (obj) {
                var choose = obj.event;
                switch (choose) {
                    case 'add':
                        $.get("line/form",function (str) {
                            layer.open({
                                type:1,
                                title:'添加线路',
                                content: str,
                                area:'700px',
                                skin:'layui-layer-molv',
                                btn:['确定','取消'],
                                success:function () {
                                    layui.form.render();
                                },
                                yes:function (index) {
                                    var poleIds = layui.formSelects.value('poles','valStr');

                                    var polesName = layui.formSelects.value('poles','name');
                                    if(poleIds == ""){
                                        layer.msg("请选择杆塔");
                                    }else{
                                        //获取起始杆塔和终止杆塔
                                        var array = new Array();
                                        array = polesName.toString().split(",");
                                        var startPoleCode = array[0];
                                        var endPoleCode = array[array.length-1];
                                        //赋值
                                        $(":input[name = 'startPoleCode']").val(startPoleCode);
                                        $(":input[name = 'endPoleCode']").val(endPoleCode);


                                        var params = $("#lineForm").serialize();
                                        $.post('${path}/line/addLine',params,function (data) {
                                            if(data){
                                                layer.msg("添加成功!");
                                                layer.close(index);
                                                table.reload("lineTable");
                                            }else{
                                                alert("添加失败!");
                                            }
                                        })
                                    }
                                }
                            });
                        })
                        break;
                }
            })

            //监听行内工具栏
            table.on("tool(lineTable)",function (obj) {
                var data = obj.data;

                if(obj.event == 'del'){
                    console.log(data.id);
                    layer.open({
                        time:0,
                        title:'友情提示',
                        content:'确定要删除吗？',
                        btn:['确定','取消'],
                        yes : function () {
                            $.post("${path}/line/del",{"id":data.id},function (data) {
                                if(data){
                                    layer.msg('删除成功！！！');
                                    table.reload('lineTable');
                                }
                            });
                        }
                    })
                }else if(obj.event == 'edit'){
                    $.get("line/form",function (view) {
                        layer.open({
                            type:1,
                            title:'修改线路',
                            content: view,
                            area:'600px',
                            skin:'layui-layer-molv',
                            btn:['确定','取消'],
                            success:function(){
                                var poles = new Array();//线路杆塔
                                var endPoleId;//终止杆塔
                                //表单值
                                $.get("/line/getLine",{"lineId":data.id},function (data) {
                                    console.log(data);
                                    layui.form.val('lineForm',data);
                                    poles.push(data.startPoleId);
                                    endPoleId = data.endPoleId;
                                })
                                //赋值杆塔下拉框
                                $.get("/line/getLinePole",{"lineId":data.id},function (linePole) {
                                    console.log(linePole);
                                    $.each(linePole,function () {
                                        console.log(this.id);
                                        console.log(this.poleCode);
                                        var option = $('<option></option>').appendTo("#pole");
                                        option.text(this.poleCode).val(this.id);
                                    });
                                    layui.formSelects.render();

                                    //选中杆塔下拉框
                                    for(let pole of linePole){
                                        poles.push(pole.id);
                                    }

                                    poles.push(endPoleId);
                                    layui.formSelects.value('poles',poles)
                                })

                            },
                            yes:function (index) {
                                //获取杆塔信息
                                var poleIds = layui.formSelects.value('poles','valStr');
                                var polesName = layui.formSelects.value('poles','name');
                                if(poleIds == ""){
                                    layer.msg("请选择杆塔");
                                }else {
                                    //获取起始杆塔和终止杆塔
                                    var array = new Array();
                                    array = polesName.toString().split(",");
                                    var startPoleCode = array[0];
                                    var endPoleCode = array[array.length - 1];
                                    //赋值
                                    $(":input[name = 'startPoleCode']").val(startPoleCode);
                                    $(":input[name = 'endPoleCode']").val(endPoleCode);
                                }
                                //获取表单数据,修改
                                var params = $("#lineForm").serialize();

                                $.post("/line/update",params,function (data) {
                                    if(data){
                                        layer.close(index);
                                        layer.msg("修改成功",{icon:1});
                                        table.reload("lineTable");
                                    }else{
                                        layer.msg("修改失败",{icon:2});
                                    }
                                })
                            }
                        })
                    })
                }
            })
        })
    </script>


</body>
</html>